<template>
  <div class="table-box">
    <div class="t-header">
      <div class="header-text">{{ tableTitle }}</div>
    </div>

    <div class="t-body" ref="tBody">
      <div ref="tipBox" class="tip-text">
        <slot name="tip"></slot>
      </div>
      <div v-for="(row, index) in tableData" :key="index" class="t-row">
        <div v-for="(col, idx) in row" :key="idx" class="t-column">{{ col }}</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      tableTitle: {
        default: '',
      },
      tableData: {
        default: [],
      },
    },
    created() {
      this.$nextTick(() => {
        this.createMaxChild();
        // 根据页面大小自动响应图表大小
        window.addEventListener('resize', () => {
          this.createMaxChild();
        });
      });
    },
    methods: {
      createMaxChild() {
        const tBodyDiv = this.$refs.tBody;
        const tipBox = this.$refs.tipBox;

        var elements = tBodyDiv.querySelectorAll('.js-create');

        while (elements.length > 0) {
          tBodyDiv.removeChild(elements[0]);
        }

        // 计算 tBody 的高度
        const div1Height = tBodyDiv.offsetHeight - tipBox.offsetHeight;

        // 计算每个子 div 的高度
        const childDivHeight = 80;

        // 计算最多可以插入的子 div 个数
        const maxChildDivs = Math.floor(div1Height / childDivHeight) - this.tableData.length - 1;
        // 创建文档片段
        const fragment = document.createDocumentFragment();

        // 创建子 div 并添加到文档片段中
        for (let i = 0; i < maxChildDivs; i++) {
          const div = document.createElement('div');
          div.className = 't-row js-create';
          for (let j = 0; j < this.tableData[0].length; j++) {
            const divCol = document.createElement('div');
            divCol.className = 't-column';
            div.appendChild(divCol);
          }
          fragment.appendChild(div);
        }

        // 将文档片段一次性插入到 div1 中
        tBodyDiv.appendChild(fragment);
      },
    },
  };
</script>
<style lang="scss">
  .table-box {
    height: 60%;
    flex: 1;
    display: flex;
    flex-direction: column;

    .t-header {
      background: url(../image/table-header.png) 0px 0px no-repeat;
      background-size: 100% 100%;
      height: 68px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: -1px;
      z-index: 10;

      .header-text {
        font-size: 20px;
        font-weight: bold;
        color: #ffffff;
        background: linear-gradient(0deg, #ffffff 0%, #98deff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    .t-body {
      flex: 1;
      border: 1px solid #2b7cb5;

      .tip-text {
        padding: 8px;
        font-size: 12px;
        color: #ffffff;
        line-height: 2;
      }
    }

    .t-row {
      display: flex;
      text-align: center;
      color: #ffffff;
      min-height: 40px;
      border-bottom: 1px solid rgba(43, 124, 181, 0.5);

      &:nth-last-child(1) {
        border-bottom: none;
      }

      &:nth-child(even) {
        background: rgba(12, 112, 189, 0.2);
      }

      .t-column {
        color: white;
        flex: 1;
        padding: 20px 3px;
        border-right: 1px solid rgba(43, 124, 181, 0.4);
        font-size: 16px;

        &:nth-last-child(1) {
          border-right: none;
        }
      }
    }
  }
</style>
